<template>
    <div class="container">
        <Header></Header>
        <div class="content">
            <img class="content_topImg" src="./images/background_top.png" alt="">
            <div class="target">
                <img src="./images/active_title1.png" alt="征稿对象">
                <div class="text">
                    面向全国各个年龄艺术爱好者以及 18周岁以下青少年、儿童征集作品（含港澳台）
                </div>
            </div>
            <div class="categories">
                <img src="./images/active_title2.png" alt="活动组别">
                <div class="ageGroup">
                    <div class="ageGroup_left">
                        <div class="text red">学前组&emsp;&emsp;&emsp;&emsp;&emsp;（6岁以下）</div>
                        <div class="text red">小学低年级组&emsp;&emsp;（7-9岁）</div>
                        <div class="text red">小学高年级组&emsp;&emsp;（10-12岁）</div>
                    </div>
                    <div class="ageGroup_center"></div>
                    <div class="ageGroup_right">
                        <div class="text red">初中组&emsp;&emsp;&emsp;&emsp;&emsp;（13-15岁）</div>
                        <div class="text red">高中组&emsp;&emsp;&emsp;&emsp;&emsp;（16-18岁）</div>
                        <div class="text red">成人组&emsp;&emsp;&emsp;&emsp;&emsp;（18岁以上）</div>
                    </div>
                </div>
                <div class="text">注：全部参选作品将按照对应组别进行评审</div>
            </div>
            <div class="group">
                <img src="./images/active_title3.png" alt="活动主题">
                <div class="text">第三届·韶華杯青少年美育系列活动创作主题为:</div>
                <img class="topic_title" src="./images/topic_title.png" alt="璀璨华夏文化艺术字体">
                <div class="text">注：活动主题不作为作品评审的核心标准。</div>
            </div>
            <div class="group">
                <img src="./images/active_title4.png" alt="活动类目">
                <div class="category">
                    <div class="subheading">书画活动</div>
                    <div class="subheading">朗诵活动</div>
                    <div class="subheading">征文活动</div>
                </div>
                <div class="text lineHeight">韶華杯青少年美育系列活动共分为三大类目。</div>
                <div class="subheading lineHeight">书画活动</div>
                <div class="text lineHeight">包含类目：油画、版画、水彩画、水粉画、素描、速写、儿童画、壁画、中国画、软笔书法、硬笔书法、新型材料画、插画、雕塑、摄影等书画创作形式。</div>
                <div class="subheading lineHeight">征文活动</div>
                <div class="text lineHeight">包含类目：习作、诗歌、散文、小说、诗集、戏剧、议论文、小品文等文学创作形式。</div>
                <div class="subheading lineHeight">朗诵活动</div>
                <div class="text lineHeight">包含类目：个人朗诵、配乐朗诵、表演朗诵、个人朗读等朗诵创作形式。</div>
            </div>
            <div class="group">
                <img src="./images/active_title5.png" alt="作品要求">
                <div class="subheading lineHeight">书画作品活动作品要求</div>
                <div class="text lineHeight">
                    作品不限创作形式，题材以积极向上，弘扬践行华夏文化为主自由发挥创作；<br>
                    作品形式完整、表达意义积极向上；<br>
                    作品图像不得超过 900MB；<br>
                    作品图像命名方式以作者姓名、作者年龄、作品名称三项命名，中间用空格隔开；<br>
                    以电子版照片形式提交至组委会或授权组织单位。<br>
                </div>
                <div class="subheading lineHeight">征文活动作品要求</div>
                <div class="text lineHeight">
                    作品不限创作形式、不限文体，习作、散文、诗歌、小说、剧本均可，由于审稿资源有限，字数2000字以内为宜；<br>
                    书写字迹清晰可辨别，无错别字；<br>
                    作品内容符合本活动主导思想，弘扬主旋律，传播正向价值观；<br>
                    以电子版照片形式提交至组委会或授权组织单位。<br>
                </div>
                <div class="subheading lineHeight">朗诵活动作品要求</div>
                <div class="text lineHeight">
                    作品要求为 2025 年新录制创作的视频；<br>
                    高清 1920*1080 横屏拍摄；<br>
                    格式为 MP4；<br>
                    长度为 2-5 分钟（学前组不宜超过 2 分钟，小学组不宜超过 3 分钟，中学组不宜超过 4 分钟，大学组不宜超过 5 分钟）；<br>
                    文件大小不超过 700MB；<br>
                    图像、声音清晰，不抖动、无噪音；<br>
                    视频作品必须同期录音，不得后期配音；<br>
                    视频开头以文字方式展示作品名称及作品作者、创作者姓名、指导教师（如果没有可不写）、组别等内容，此内容须与报名信息一致；<br>
                    视频文字建议使用方正字库字体或其他有版权的字体，视频中不得使用未经肖像权人同意的肖像，不得使用未经授权的图片、视频和音频，不得出现与本活动无关的条幅、角标等；<br>
                    以电子版视频形式提交至组委会或授权组织单位。<br>
                </div>
            </div>
            <div class="group">
                <img src="./images/active_title6.png" alt="活动荣誉">
                <div class="activeHonor">
                    <img src="./images/activeHonor.jpg" alt="比赛奖项全揽">
                    <img src="./images/activeHonor_right.png" alt="奖项封套">
                </div>
                <img class="button" @click="toActiveHonor" src="./images/button.png" alt="更多信息">
            </div>
            <div class="footer">
                <Footer></Footer>
            </div>
        </div>
    </div>
</template>
<script>
import Footer from '@/components/Footer/Footer.vue';
import Header from '@/components/Header/Header.vue';

export default {
    name: 'activeDetail',
    components: {
        Header, Footer
    },
    data() {
        return {

        };
    },
    methods: {
        toActiveHonor(){
            this.$router.push({path:'/activeHonor'})
        }
    }
}
</script>
<style scoped>
.content {
    width: 100%;
    text-align: center;
}

.content_topImg {
    width: 100%;
    margin-top: -1vw;
}

.target {
    width: 80%;
    margin: 0 auto;
}


.target img {
    width: 18vw;
    margin-bottom: 2vw;
}

.categories {
    width: 80%;
    margin: 0 auto;
    margin-top: 5vw;
}

.categories img {
    width: 18vw;
    margin-bottom: 2vw;
}

.text {
    font-size: 35px;
    letter-spacing: 10px;
    line-height: 60px;
}

.ageGroup {
    width: 80%;
    margin: 0 auto;
    margin-top: 5vw;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2vw;
}

.ageGroup_center {
    width: 0px;
    height: 200px;
    border: 2px solid #BF272D;
}

.red {
    color: #BF272D;
    text-align: left;
}

.group {
    width: 80%;
    margin: 0 auto;
    margin-top: 5vw;
}

.group img {
    width: 18vw;
    margin-bottom: 2vw;
}

.group .topic_title {
    width: 35vw;
    margin: 1vw auto;
}

.category {
    width: 50vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category .subheading:nth-child(2) {
    height: 80px;
    line-height: 80px;
    padding: 0 8vw;
    border-left: 2px solid #BF272D;
    border-right: 2px solid #BF272D;
}

.subheading {
    font-size: 35px;
    color: #BF272D;
}

.footer {
    width: 100%;
    height: 10vw;
}

.lineHeight {
    margin: 2vw 0;
}

.activeHonor {
    width: 100%;
    display: flex;
}

.activeHonor img:first-child {
    width: 75%;
}

.activeHonor img:last-child {
    width: 25%;
}

.button {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.button:hover {
    transform: scale(1.05);
}

/* 横屏小分辨率 */
@media (min-width: 1401px) and (max-width: 2100px) {
    .ageGroup {
        width: 100%;
    }

    .ageGroup_center {
        height: 150px;
    }

    .subheading {
        font-size: 28px;
    }

    .text {
        font-size: 28px;
        letter-spacing: 8px;
        line-height: 50px;
    }
}

@media (min-width: 961px) and (max-width: 1400px) {
    .ageGroup {
        width: 100%;
    }

    .ageGroup_center {
        height: 150px;
    }

    .category {
        width: 100%;
    }

    .subheading {
        font-size: 20px;
    }

    .text {
        font-size: 20px;
        letter-spacing: 5px;
        line-height: 40px;
    }
}

/* 手机/小屏幕 */
@media (max-width: 960px) {
    .target img {
        width: 35vw;
    }

    .categories img {
        width: 35vw;
    }

    .text {
        font-size: 15px;
        letter-spacing: 4px;
        line-height: 30px;
    }

    .ageGroup {
        width: 90%;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .ageGroup_center {
        width: 0px;
        height: 0px;
        border: none;
    }

    .group img {
        width: 35vw;
    }

    .group .topic_title {
        width: 50vw;
    }

    .category {
        width: 100%;
    }

    .category .subheading:nth-child(2) {
        height: 40px;
        line-height: 40px;
        padding: 0 8vw;
    }

    .subheading {
        font-size: 15px;
    }

    .footer {
        height: 25vw;
    }
}
</style>